<template>
  <div class="home">
    <div class="header">
      <!-- 传递到address是上去 -->
      <div class="address_map" @click="$router.push({name:'address',params:{city:city}})">
        <i class="fa fa-map-marker"></i>
        <span>收货地址</span>
        <span class="states">{{states}}</span>
        <i class="fa fa-sort-desc"></i>
      </div>
      <div :class="{'fixedview':showFilter}">
        <div class="shop_search" @click="searchs">
          <i class="fa fa-search"></i>
          搜索商家 商家名称
        </div>
      </div>
    </div>
    <!-- swiper
    -->
    <!-- 记得给高度 -->
    <div class="swiper">
      <mt-swipe :auto="4000">
        <mt-swipe-item v-for="(img,index) in  swiperImgs" :key="index">
          <img :src="img" />
        </mt-swipe-item>
      </mt-swipe>
    </div>
    <!-- 分类 -->
    <div>
      <mt-swipe :auto="0" class="entries">
        <mt-swipe-item v-for="(entry,i) in entries" :key="i" class="entry_wrap">
          <div class="foodentry" v-for="(item,index) in entry" :key="index">
            <div class="img_wrap">
              <img :src="item.image" alt />
            </div>
            <span>{{item.name}}</span>
          </div>
        </mt-swipe-item>
      </mt-swipe>
    </div>
    <!-- 推荐商家 -->
    <div class="tuiJian">
      <div>———— 推荐商家 ————</div>
      <div>
        <FilterView :filterData="filterData" @searchFixed="showFilterView" @update="update" />
      </div>
      <!-- 商家信息 -->
      <!-- 上拉加载 下拉刷新 -->
      <!-- 若为真，则 bottomMethod 不会被再次触发 -->
      <mt-loadmore
        :top-method="loadData"
        :bottom-method="loadMore"
        :bottom-all-loaded="allLoaded"
        ref="loadmore"
        :auto-fill="false"
        :bottomPullText="bottomPullText"
      >
        <div class="shopList">
          <IndexShop
            v-for="(item,index) in restaurants"
            :key="index"
            :restaurant="item.restaurant"
          />
        </div>
      </mt-loadmore>
    </div>
  </div>
</template>
<script>
import { Swipe, SwipeItem, Loadmore } from "mint-ui";
import FilterView from "./../components/FilterView.vue";
import IndexShop from "./../components/indexShop.vue";

export default {
  name: "home",
  components: {
    FilterView,
    IndexShop,
  },
  computed: {
    states() {
      return this.$store.state.address;
    },
    city() {
      return (
        this.$store.getters.location.city ||
        this.$store.getters.location.province
      );
    },
  },
  data() {
    return {
      swiperImgs: [],
      entries: [],
      filterData: null,
      showFilter: false,
      page: 1,
      size: 5,
      restaurants: [],
      allLoaded: false,
      bottomPullText: "上拉加载更多",
      data: null,
    };
  },
  created() {
    this.getData();
  },
  methods: {
    searchs() {
      this.$router.push("/search");
    },
    update(condation) {
      // console.log(condation);
      this.data = condation;
      this.loadData();
    },
    loadMore() {
      this.$axios
        .post(
          // 要切换页数的时候可以这样写${}
          `https://element-interface.herokuapp.com/api/profile/restaurants/${this.page}/${this.size}`
        )
        .then((res) => {
          // 加载完之后重新渲染
          this.$refs.loadmore.onBottomLoaded();
          if (res.data.length > 0) {
            res.data.forEach((item) => {
              this.restaurants.push(item);
            });
            if (res.data < this.size) {
              // 若为真，则 bottomMethod 不会被再次触发
              this.allLoaded = true;
            }
          } else {
            // 数据为空
            this.allLoaded = true;
            this.bottomPullText = "没有更多了";
          }
        });
    },
    loadData() {
      this.page = 1;
      this.allLoaded = false;
      this.bottomPullText = "上拉加载更多";
      this.$axios
        .post(
          // 要切换页数的时候可以这样写${}
          `https://element-interface.herokuapp.com/api/profile/restaurants/${this.page}/${this.size}`,
          this.data
        )
        .then((res) => {
          // console.log(res.data);
          // 当数据加载完了 就停止加载
          this.$refs.loadmore.onTopLoaded();
          this.restaurants = res.data;
        });
    },
    getData() {
      // 拉取商家信息
      this.loadData();
      this.$axios(
        "https://element-interface.herokuapp.com/api/profile/shopping"
      ).then((res) => {
        this.swiperImgs = res.data.swipeImgs;
        this.entries = res.data.entries;
      });
      this.$axios(
        "https://element-interface.herokuapp.com/api/profile/filter"
      ).then((res) => {
        console.log(res);
        this.filterData = res.data;
      });
    },
    showFilterView(isShow) {
      this.showFilter = isShow;
    },
  },
};
</script>

<style scoped>
.home {
  width: 100%;
  height: 100%;
  overflow: hidden;
  box-sizing: border-box;
}
.header {
  background-color: #009eef;
  padding-top: 16px;
}
.header .address_map {
  color: #fff;
}
.address_map span {
  padding: 0 10px;
  display: inline-block;
  width: 80%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.header .shop_search {
  margin-top: 10px;
  background-color: #fff;
  padding: 10px 10px;
  border-radius: 4px;
  text-align: center;
  color: #aaa;
}
.states {
  position: absolute;
  left: 24%;
  top: 16px;
}
.swiper {
  height: 100px;
}
.entries {
  height: 200px;
}
.swiper img {
  width: 100%;
  height: 100px;
}
.img_wrap img {
  width: 10%;
  height: 100%;
  float: left;
}
.foodentry span {
  /* display: block; */
  color: #666;
  font-size: 0.32rem;
}
.tuiJian {
  padding-left: 80px;
}
.fixedview {
  position: fixed;
  z-index: 9999;
  top: 0;
  width: 100%;
}
/* 这里是上拉加载下拉刷新的样式 */
.mint-loadmore {
  height: calc(100% -95px);
  overflow: auto;
}
</style>